import React, { forwardRef } from 'react'
import { Form, Input, Select } from 'antd'
const OpenForm = forwardRef((props, ref) => { // ref: 父组件透传过来的
    // const [isRegionDisabled, setIsRegionDisabled] = useState(false)
    // useEffect(() => {
    //     roleNameChange()
    // }, [])
    const roleNameChange = (val) => {
        if (val === 1) {
            props.setIsRegionDisabled(true)
            // console.log(ref.current)
            ref.current.setFieldsValue({
                region: ''
            })
        } else {
            props.setIsRegionDisabled(false)
        }
    }
    return (
        <>
            <Form
                ref={ref}
                layout="vertical"
                name="form_in_modal"
            >
                <Form.Item
                    name="username"
                    label="用户名"
                    validateTrigger="onBlur"
                    rules={[
                        {
                            required: true,
                            message: '请输入用户名!',
                        }
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="password"
                    label="密码"
                    validateTrigger="onBlur"
                    rules={[
                        {
                            required: true,
                            message: '请输入密码!',
                        }
                    ]}
                >
                    <Input type="textarea" />
                </Form.Item>
                <Form.Item
                    name="roleId"
                    label="角色"
                    rules={[
                        {
                            required: true,
                            message: '请选择区域!',
                        }
                    ]}
                >
                    <Select
                        options={props.rolesList}
                        fieldNames={
                            {
                                value: 'id',
                                label: 'roleName'
                            }
                        }
                        onChange={roleNameChange}
                    />
                </Form.Item>
                <Form.Item
                    name="region"
                    label="区域"
                    rules={[
                        {
                            required: !props.isRegionDisabled,
                            message: '请选择区域!',
                        }
                    ]}
                >
                    <Select
                        disabled={props.isRegionDisabled}
                        options={props.regions}
                    />
                </Form.Item>

            </Form>
        </>
    )
})
export default OpenForm
